<template>
  <!-- <scroll-view class="goods-detail-box" ref="scrollView" scroll-y="true" :style="{ 'height': heightView + 'rpx' }"
    @scroll="onHandlerScroll" @scrolltolower="handlerScroll"> -->
  <view class="goods-detail-box">



    <!-- 商品导航栏 -->
    <view class="goods-detail-classify" :style="{ 'opacity': chooseClassifyOpacity }">
      <goods-classify :classify="classify" @choose-classify="chooseClassify"></goods-classify>
    </view>

    <!-- 商品详情轮播图 -->
    <view style="position: relative;" id="goods-detail">
      <swiper style="height: 50vh; z-index: -1;" @change="onSwiperChange" :autoplay="true" :circular="true"
        :interval="3000" :duration="1000">
        <swiper-item class="goods-detail-item" v-for="(  item, index  ) in   bannerList  " :key="index">
          <!-- 轮播内容 -->
          <image class="goods-detail-image" :src="item" mode="" @click="preview(index)" />
        </swiper-item>
      </swiper>
      <text class="goods-detail-image-index">{{ currentIndex + '/' + (bannerList.length) }}</text>
    </view>

    <!-- 价格区域 -->
    <view class="goods-detail-msg">

      <!-- 价格 -->
      <text class="goods-detail-price">￥ {{ specificationEstimates }}</text>

      <!-- 包邮优惠 -->
      <view class="goods-detail-free-shipping">
        <text style="background-color: blanchedalmond;padding: 4rpx 15rpx;">满80包邮</text>
        <view class="goods-detail-free-shipping-to" @click="onMeanuChoose('优惠')">
          <text>查看优惠</text>
          <image src="./images/right.png" mode="scaleToFill" />
        </view>
      </view>

      <!-- 商品描述 -->
      <view class="goods-detail-description">
        <text>商品描述</text>
        <view class="goods-detail-share" @click="goodsShare">
          <image src="./images/share.png" mode="scaleToFill" />
          <text>分享</text>
        </view>
      </view>

    </view>

    <!-- 运费 -->
    <view class="goods-detail-freight">
      <view>
        <text>运费</text>
        <text class="goods-detail-description-price">￥0.0~25.0</text>
      </view>
      <text>剩余998</text>
    </view>

    <!-- 服务 -->
    <view class="goods-detail-serve" @click="onMeanuChoose('服务')">
      <text style="color:#969393">服务</text>
      <text style="overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;">
        {{ goodsServeTitle }}
      </text>
      <!-- <text>详情</text> -->
      <image src="./images/right-h.png" mode="scaleToFill" />
    </view>

    <!-- 商品样式选择 -->
    <view class="goods-detail-selection" @click="onMeanuChoose('购物')">

      <text>已选</text>
      <view class="goods-detail-specification">
        <text style="color:red">{{ chooseSpecification }}</text>
        <view class="goods-detail-specification-choose">
          <image v-for="( item,index ) in  goodsSpecification.slice(0, 5) " :key="index" :src="item.commodity_specification_image"
            mode="aspectFill" />
          <text class="goods-detail-specification-choose-size">共{{ goodsSpecification.length }}种规格可选</text>
        </view>
      </view>

      <image class="goods-detail-specification-image" src="./images/right-h.png" />
    </view>

    <!-- 商品购买人数 -->
    <view class="goods-detail-buyers">
      <view class="goods-detail-buyers-header">
        <text>2345人已购买</text>
        <view class="goods-detail-buyers-header-right">
          <text style="color: #969393;font-size: 24rpx;">查看全部</text>
          <image src="./images/right-h.png" mode="scaleToFill" />
        </view>
      </view>

      <view class="goods-detail-buyers-content">
        <view class="goods-detail-buyers-content-info">
          <image src="./images/shopping-cart.png" mode="scaleToFill" />
          <text class="text-hidden ">小**</text>
        </view>

        <view class="goods-detail-buyers-content-time">
          <text>10月6日买了一件</text>
          <view class="goods-detail-buyers-content-toOrder" @click="onMeanuChoose('购物')">去下单</view>
        </view>
      </view>
      <view class="goods-detail-buyers-content">
        <view class="goods-detail-buyers-content-info">
          <image src="./images/shopping-cart.png" mode="scaleToFill" />
          <text class="text-hidden ">小**</text>
        </view>

        <view class="goods-detail-buyers-content-time">
          <text>10月6日买了一件</text>
          <view class="goods-detail-buyers-content-toOrder" @click="onMeanuChoose('购物')">去下单</view>
        </view>
      </view>
    </view>

    <!-- 商品评价 -->
    <view class="goods-detail-appraise">
      <view class="goods-detail-appraise-header">
        <text>商品评价(10)</text>
        <view style="display: flex; align-items: center;">
          <text style="color: #969393;font-size: 24rpx;">查看全部</text>
          <image src="./images/right-h.png" mode="scaleToFill" />
        </view>
      </view>

      <view class="goods-detail-appraise-content">
        <view class="goods-detail-appraise-contet-info">
          <image src="./images/right-h.png" mode="scaleToFill" />
          <text class="text-hidden ">小***</text>
        </view>
        <text>⭐️⭐️⭐️⭐️⭐️</text>
      </view>

      <view class="goods-detail-appraise-content">
        <view class="goods-detail-appraise-contet-info">
          <image src="./images/right-h.png" mode="scaleToFill" />
          <text class="text-hidden ">小***</text>
        </view>
        <text>⭐️⭐️⭐️⭐️⭐️</text>
      </view>
    </view>

    <!-- 该商品所属评价 -->
    <view class="goods-detail-affiliation">
      <view class="goods-detail-affiliation-header">
        <text>该店铺所属评价</text>
        <view style="display: flex; align-items: center;">
          <text style="color: #969393;font-size: 24rpx;">查看全部</text>
          <image src="./images/right-h.png" mode="scaleToFill" />
        </view>
      </view>

      <view class="goods-detail-affiliation-content">
        <text>质量很好(10)</text>
        <text>质量很好(10)</text>
        <text>质量很好(10)</text>
        <text>质量很好(10)</text>
        <text>质量很好(10)</text>
        <text>质量很好(10)</text>
        <text>质量很好(10)</text>
      </view>
    </view>




    <!-- 商品说明 -->
    <view class="goods-detail-product-description">
      <view class="goods-detail-product-description-header" @click="productDescription = !productDescription">
        <text>商品说明</text>
        <image src="./images/right-h.png" mode="scaleToFill" :class="[productDescription ? 'revolve ' : 'revolve-o']" />
      </view>
    </view>
    <view class="goods-detail-product-description-content" v-show="productDescription">
      优品智能高清4K电视采用先进的液晶显示技术与超清分辨率，拥有3840
      x 2160的细腻画质，带
      给您身临其境般的视觉享受。内置高性能处理器和大容量内存，确保流畅播放各类高清晰度视频内容，无卡顿、无延迟。</view>

    <!-- 商品详情介绍 -->
    <view class="goods-detail-introduce" id="goodsDetailIntroduce">
      商品详情
    </view>


    <!-- 更多好物 -->
    <view class="goods-detail-more-products">
      <view class="goods-detail-more-products-title">更多好物</view>
      <goods :list="goodsList" :classify="[]"></goods>
      <goods :list="goodsList" :classify="[]"></goods>
    </view>

    <!-- 底部购买导航栏 -->
    <view class="goods-detail-purchase">

      <view class="goods-detail-purchase-item">
        <image src="./images/shop.png" mode="scaleToFill" />
        <text>店铺</text>
      </view>
      <view class="goods-detail-purchase-item" @click="toCart">
        <image src="./images/shopping-cart.png" mode="scaleToFill" />
        <text>购物车</text>
        <text class="goods-detail-purchase-item-size" v-show="goodsStore.shoppingCart.length > 0">{{
          goodsStore.shoppingCart.length }}</text>
      </view>

      <view class="goods-detail-to-purchase">
        <text class="goods-detail-to-purchase-item" @click="onMeanuChoose('购物')">加入购物车</text>
        <text class="goods-detail-to-purchase-item" style="background-color: red;">立即购买</text>
      </view>

    </view>

    <!-- 底部技术支持 -->
    <view class="goods-detail-technical-support">
      来自不想说话而已的技术支持
    </view>


    <!-- 商品服务详情底部栏目 -->
    <goods-server :goods-serve="goodsServe" @shut-down="onMeanuChoose" v-show="meanuChoose === '服务'"></goods-server>

    <!-- 购物车底部栏目 -->
    <goods-shopping-cart :goods-specification="goodsSpecification" @shut-down="onMeanuChoose"
      @select-product="selectProduct" v-show="meanuChoose === '购物'"></goods-shopping-cart>

    <!-- 商品更多优惠底部栏目 -->
    <goods-preferential @shut-down="onMeanuChoose" v-show="meanuChoose === '优惠'"></goods-preferential>
  </view>
  <!-- </scroll-view> -->
</template>

<script lang="ts" setup>
import { useGoodsStore } from "@/pinia/goods"
import GoodsClassify from "../../components/goodsClassify/GoodsClassify.vue"
import GoodsServer from "../../components/goods_detail/goods_server/GoodsServer.vue"
import GoodsShoppingCart from "../../components/goods_detail/goods_cart/GoodsShoppingCart.vue"
import GoodsPreferential from "@/components/goods_detail/goods_preferential/GoodsPreferential.vue";
import Goods from "@/components/goods/Goods.vue"
import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import { api } from "@/request/request"
import type { ChooseClassifyData, GoodsList, GoodsServe, GoodsSpecification } from "../../config/data/data"


//全局状态
const goodsStore = useGoodsStore();

//商品id
const goodsId = ref<string>('');

//点击选中商品列表分类导航栏透明度
const chooseClassifyOpacity = ref(0);

//整个视口的高度
const heightView = ref();

//商品轮播图数据
const bannerList = ref<string[]>([]);

//跳转购物车
const toCart = () => {
  uni.switchTab({
    url: '/pages/cart/cart' // tabBar页面的路径
  })
}

//监听滚动条触底时触发
const handlerScroll = () => {
  console.log("到底了")
};

//商品价格预览
const specificationEstimates = computed(() => {

  if (chooseSpecificationIndex.value === -1) {
    goodsSpecification.value.sort((a, b) => {
      return a.commodity_specification_price - b.commodity_specification_price
    })
    if (!goodsSpecification.value[0]) {
      return;
    }
    return (goodsSpecification.value[0].commodity_specification_price) + '-' + (goodsSpecification.value[goodsSpecification.value.length - 1].commodity_specification_price);

  } else {
    return goodsSpecification.value[chooseSpecificationIndex.value].commodity_specification_price;
  }

})

// 分享时需要的内容
const shareContent = ref({
  title: '页面标题',
  imageUrl: 'http://example.com/share-image.jpg', // 可选，分享图片链接
  path: '/pages/index/index', // 分享后点击跳转的目标路径，对于小程序和H5尤其重要
  query: {}, // 可选，附加到path后面的查询参数对象
  description: '页面描述信息', // 可选，微信朋友圈分享时会用到
});
//
const miniProgram = ref({
  id: "wx68560628505a2ef5",
  path: "",
  type: 1,
  webUrl: ""
});
//商品分享
const goodsShare = () => {
}

//底部菜单弹出选项
const meanuChoose = ref("");
//弹出菜单，关闭菜单
const onMeanuChoose = (item: string) => {
  meanuChoose.value = item;
}

//商品服务列表数据
const goodsServe = ref<GoodsServe[]>([]);
//服务列表简述
const goodsServeTitle = computed(() => {
  return goodsServe.value.filter(item => item.id > 0).map(item => item.title).join('ㆍ')
});

//商品规格列表数据
const goodsSpecification = ref<GoodsSpecification[]>([]);

//顶部导航栏数据列表
const classify = ref<string[]>(['商品', '评价', '详情', '推荐']);

//当前选中商品规格下标
const chooseSpecificationIndex = ref(-1);
//当前选中商品数量
const chooseSpecificationSize = ref(0);
//当前选中商品规格
const chooseSpecification = computed(() => {
  if (chooseSpecificationIndex.value < 0) {
    return "规格分类";
  }
  return '规格：' + goodsSpecification.value[chooseSpecificationIndex.value].commodity_specification_type + '・数量：' + chooseSpecificationSize.value
})

//选中商品事件
const selectProduct = (index: number, num: number) => {
  chooseSpecificationIndex.value = index;
  chooseSpecificationSize.value = num;
  addToCart();
}

//加入购物车事件
const addToCart = () => {
  if (chooseSpecificationIndex.value === -1 || chooseSpecificationSize.value === 0) {
    meanuChoose.value = "购物";
    return;
  }

  //添加购物车
  goodsStore.shoppingCartAdd({
    cart_id: goodsId.value, //商品id
    cart_title: goodsSpecification.value[chooseSpecificationIndex.value].commodity_specification_msg, //商品描述信息
    cart_type: goodsSpecification.value[chooseSpecificationIndex.value].commodity_specification_type, //商品类型
    cart_num: chooseSpecificationSize.value, //商品数量
    cart_price: goodsSpecification.value[chooseSpecificationIndex.value].commodity_specification_price, //商品单价
    cart_image: goodsSpecification.value[chooseSpecificationIndex.value].commodity_specification_image, //商品图片
    cart_discount: goodsSpecification.value[chooseSpecificationIndex.value].commodity_specification_discount //商品折扣
  });

  uni.showToast({
    title: "添加成功",
    icon: 'none',
    duration: 800,
    mask: true,
  })

}

//当前轮播图下标
const currentIndex = ref(1);

//监听轮播图滚动事件
const onSwiperChange = (e: { detail: { current: number; }; }) => {
  currentIndex.value = e.detail.current + 1;
};

//图片放大预览
const preview = (index: number) => {
  uni.previewImage({
    current: index,
    loop: true,
    urls: bannerList.value,
    indicator: 'default'
  })
}

//是否展示商品说明
const productDescription = ref(false)

//点击选中商品列表分类事件,跳转到对应模块
const chooseClassify = (data: ChooseClassifyData) => {
  let path = "";
  switch (data.content) {
    case "商品": path = "#goods-detail"; break;
    case "评价": path = ".goods-detail-buyers"; break;
    case "详情": path = ".goods-detail-introduce"; break;
    case "推荐": path = ".goods-detail-more-products"; break;
    default: path = "#goods-detail";
  }
  uni.pageScrollTo({
    selector: path,
    duration: 300,
  });
};

//商品列表数据
const goodsList = ref<GoodsList[]>([]);

//分页查询参数
const pageParam = ref({
  page: 1,
  size: 8,
  commodityTypeName: '生活用品'
})
//更多好物--分页获取
const paginatedQueries = () => {
  api.commodityPaginatedQueries(pageParam.value.page, pageParam.value.size, pageParam.value.commodityTypeName).then((res) => {
    if (res.data.length > 0) {
      goodsList.value.push(...res.data)
    }
  })
}

// 页面周期函数--监听页面加载
onLoad((e) => {

  //整个视口的高度
  const systemInfo = uni.getSystemInfoSync();
  //因为使用的是rpx因此乘以2
  heightView.value = systemInfo.windowHeight * 2;


  //获取点击跳转的模块下标
  //商品规格列表数据
  api.commodityDetail(goodsId.value = e.id).then((res) => {
    //初始化商品规格说明数据
    goodsSpecification.value = res.data.commodity_specification;
    //初始化商品服务说明数据
    // goodsServe.value = res.data.commodity_serve;
    //商品轮播图数据
    bannerList.value = res.data.commodity_image.split(',')
  })




  //初始化商品列表数据
  paginatedQueries();

  //商品服务说明数据
  goodsServe.value = [{
    id: 1,
    title: "退货服务",
    content: "商家已经赠送退货服务，所有的运费均由商家承担，具事由有订单为准"
  }, {
    id: 1,
    title: "退货服务",
    content: "商家已经赠送退货服务，所有的运费均由商家承担，具事由有订单为准"
  },
  {
    id: 1,
    title: "退货服务",
    content: "商家已经赠送退货服务，所有的运费均由商家承担，具事由有订单为准"
  }];


});
// 页面周期函数--监听页面初次渲染完成
onReady(() => {


});
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {

});
// 页面周期函数--监听页面隐藏
onHide(() => {

});
// 页面周期函数--监听页面卸载
onUnload(() => {

});
// 页面处理函数--监听页面滚动(not-nvue)
onPageScroll((event) => {
  if (event.scrollTop < 100) {
    chooseClassifyOpacity.value = 0;
  }
  else if (event.scrollTop > 500) {
    chooseClassifyOpacity.value = 1;
  } else {
    chooseClassifyOpacity.value = Number(((event.scrollTop) / 250).toFixed(1));
  }
})

// 页面处理函数--用户点击右上角分享
onShareAppMessage(() => {
  return {
    title: '精美好物',//分享标题
    path: '/subpkg/goods_detail/goods_detail?id=1',//分享页面路径
    desc: '更多好物优惠等你来拿！',//自定义分享描述
  }
});
// 页面处理函数--监听用户下拉动作
// onPullDownRefresh() { uni.stopPullDownRefresh(); },
// 页面处理函数--监听用户上拉触底
// onReachBottom() {},




</script>

<style scoped lang="scss">
view,
text {
  word-break: break-all;
}

.goods-detail-box {
  background-color: $uni-bg-color;
  position: relative;

  .goods-detail-classify {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
    transition: all .2s;
  }

  .text-hidden {
    width: 200rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .goods-classify-box {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .goods-detail-msg {
    padding: 20rpx;
    background-color: $uni-box-color;

    .goods-detail-price {
      display: flex;
      width: 100%;
      color: red;
      font-size: 35rpx;
      font-weight: 600;

    }

    .goods-detail-free-shipping {
      display: flex;
      justify-content: space-between;
      color: $uni-color-error;
      font-size: 27rpx;
      margin: 20rpx 0;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      .goods-detail-free-shipping-to {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .goods-detail-description {
      width: 100%;
      display: flex;
      min-height: 60rpx;
      justify-content: space-between;

      text {
        color: #141414;
        font-size: 26rpx;
      }

      .goods-detail-description-price {
        color: $uni-text-color;
        font-weight: 500;

      }

      .goods-detail-share {
        display: flex;
        flex-direction: column;
        justify-content: center;

        image {
          width: 45rpx;
          height: 45rpx;
        }
      }
    }
  }

  .goods-detail-item {
    width: 100%;
    height: 600rpx;
    min-width: 100rpx;

    .goods-detail-image {
      width: 100%;
      height: 100%;
    }
  }

  .goods-detail-image-index {
    position: absolute;
    right: 4%;
    bottom: 4%;
    height: 40rpx;
    line-height: 40rpx;
    color: $uni-box-color;
    font-size: 24rpx;
    border-radius: 20rpx;
    background-color: $uni-bg-color-mask;
    padding: 0 20rpx;
  }


  .goods-detail-freight {
    width: 100%;
    display: flex;
    height: 85rpx;
    line-height: 85rpx;
    justify-content: space-between;
    background-color: $uni-box-color;
    margin: 15rpx 0;

    text {
      color: $uni-bg-color-mask;
      font-size: 26rpx;
      margin: 0 20rpx;
    }

    .goods-detail-description-price {
      color: $uni-text-color;
      font-weight: 500;

    }
  }

  .goods-detail-purchase {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 10rpx 0;
    justify-content: space-around;
    align-items: center;
    z-index: 9;
    background-color: $uni-box-color;

    image {
      width: 35rpx;
      height: 35rpx;
    }

    .goods-detail-purchase-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 2rpx 10rpx;

      text {
        font-size: 22rpx;
      }

      .goods-detail-purchase-item-size {
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(-50%);
        transform: translateY(-50%);
        width: 32rpx;
        height: 32rpx;
        background-color: red;
        color: $uni-box-color;
        border-radius: 50%;
        line-height: 32rpx;
        text-align: center;
        font-size: 20rpx;
      }
    }

    .goods-detail-to-purchase {
      display: flex;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      background-color: rgb(251, 141, 32);
      color: $uni-box-color;
      overflow: hidden;

      .goods-detail-to-purchase-item {
        width: 230rpx;
        text-align: center;
      }
    }

  }

  .goods-detail-serve {
    display: grid;
    grid-template-columns: 100rpx auto 30rpx;
    align-items: center;
    padding: 0 20rpx;
    font-size: 26rpx;
    height: 85rpx;
    line-height: 85rpx;
    background-color: $uni-box-color;

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }


  .goods-detail-selection {
    display: grid;
    grid-template-columns: 100rpx auto 30rpx;
    padding: 0 20rpx;
    font-size: 26rpx;
    padding: 20rpx;
    margin: 10rpx 0;
    background-color: $uni-box-color;

    text {
      min-width: 100rpx;
      color: $uni-bg-color-mask;
    }

    image {
      width: 50rpx;
      height: 50rpx;
      margin: 0 10rpx;
    }

    .goods-detail-specification-image {
      width: 30rpx;
      height: 30rpx;
      margin: 0;
    }

    .goods-detail-specification {
      width: 100%;


      .goods-detail-specification-choose {
        margin: 20rpx 0;
        display: flex;
        align-items: center;

        .goods-detail-specification-choose-size {
          margin-left: 10rpx;
          height: 45rpx;
          padding: 0 10rpx;
          line-height: 45rpx;
          background-color: rgba(140, 141, 142, 0.181);
          border-radius: 2rpx;
        }

      }

    }

  }


  .goods-detail-buyers {
    font-size: 26rpx;
    padding: 20rpx;
    background-color: $uni-box-color;

    .goods-detail-buyers-header {
      display: flex;
      margin-bottom: 20rpx;
      justify-content: space-between;
      align-items: center;

      image {
        width: 30rpx;
        height: 30rpx;
      }

      .goods-detail-buyers-header-right {
        display: flex;
        align-items: center;
      }
    }


    .goods-detail-buyers-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .goods-detail-buyers-content-info {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        margin-top: 15rpx;

        image {
          border-radius: 50%;
          width: 50rpx;
          height: 50rpx;
          margin-right: 5rpx;
        }
      }

      .goods-detail-buyers-content-time {
        display: flex;
        align-items: center;
        font-size: 26rpx;

        .goods-detail-buyers-content-toOrder {
          height: 40rpx;
          line-height: 40rpx;
          padding: 0 15rpx;
          border-radius: 20rpx;
          background-color: rgb(250, 38, 38);
          color: $uni-box-color;
          font-size: 24rpx;
          margin-left: 20rpx;
        }
      }
    }

  }


  .goods-detail-appraise {
    padding: 20rpx;
    background-color: $uni-box-color;
    font-size: 26rpx;
    margin-top: 20rpx;

    .goods-detail-appraise-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      image {
        width: 30rpx;
        height: 30rpx;
      }
    }

    .goods-detail-appraise-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;

      .goods-detail-appraise-contet-info {
        display: flex;
        align-items: center;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }
    }
  }

  .goods-detail-affiliation {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: $uni-box-color;
    font-size: 26rpx;

    .goods-detail-affiliation-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      image {
        width: 30rpx;
        height: 30rpx;
      }
    }

    .goods-detail-affiliation-content {
      display: grid;
      grid-template-columns: repeat(3, 30%);

      text {
        margin: 10rpx;
        text-align: center;
        height: 45rpx;
        font-size: 24rpx;
        padding: 0 10rpx;
        line-height: 45rpx;
        border-radius: 23rpx;
        background-color: rgba(185, 180, 180, 0.347);
      }
    }
  }

  .goods-detail-technical-support {
    height: 400rpx;
    width: 100%;
    text-align: center;
    line-height: 400rpx;
    text-align: center;
    line-height: 400rpx;
    font-size: 28rpx;
    color: #979595;
  }

  .goods-detail-product-description {
    position: relative;
    background-color: $uni-box-color;
    display: flex;
    align-items: center;
    height: 85rpx;

    &::after {
      display: block;
      content: "";
      width: 100%;
      height: 2rpx;
      background-color: #99979738;

    }

    .goods-detail-product-description-header {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20rpx;
      font-size: 26rpx;
      background-color: $uni-box-color;

      text {
        margin-right: 10rpx;
      }

      image {
        width: 22rpx;
        height: 22rpx;
        transform-origin: center;

      }
    }
  }

  .goods-detail-product-description-content {
    margin: 20rpx 0;
    padding: 20rpx;
    color: #979595;
    letter-spacing: 2rpx;
    font-size: 26rpx;
  }

  .goods-detail-introduce {
    padding: 0 20rpx;
    margin: 20rpx 0;
  }

  .goods-detail-more-products {
    background-color: $uni-box-color;

    .goods-detail-more-products-title {
      text-align: center;
      font-size: 27rpx;
    }
  }


  .revolve {
    animation: revolve-z ease-in-out .1s 0s 1 forwards;
  }

  .revolve-o {
    animation: revolve-z-o ease-in-out .1s 0s 1 forwards;
  }

  @keyframes revolve-z {
    0% {
      transform: rotateZ(0);
    }

    100% {
      transform: rotateZ(90deg);
    }
  }

  @keyframes revolve-z-o {
    0% {
      transform: rotateZ(0);
    }

    100% {
      transform: rotateZ(-90deg) translateX(-8rpx);
    }
  }
}
</style>@/pinia/goods@/pinia/goodsDetail@/pinia/goods